<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>控制面板</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/static/admin/layuimini/lib/layui-v2.5.5/css/layui.css" media="all">
    <link rel="stylesheet" href="/static/admin/layuimini/lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all">
    <link rel="stylesheet" href="/static/admin/layuimini/css/public.css" media="all">
    <style>
        .layui-card {
            border: 1px solid #f2f2f2;
            border-radius: 5px;
        }

        .icon {
            margin-right: 10px;
            color: #1aa094;
        }

        .icon-cray {
            color: #ffb800 !important;
        }

        .icon-blue {
            color: #1e9fff !important;
        }

        .icon-tip {
            color: #ff5722 !important;
        }

        .layuimini-qiuck-module {
            text-align: center;
            margin-top: 10px
        }

        .layuimini-qiuck-module a i {
            display: inline-block;
            width: 100%;
            height: 60px;
            line-height: 60px;
            text-align: center;
            border-radius: 2px;
            font-size: 30px;
            background-color: #F8F8F8;
            color: #333;
            transition: all .3s;
            -webkit-transition: all .3s;
        }

        .layuimini-qiuck-module a cite {
            position: relative;
            top: 2px;
            display: block;
            color: #666;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            font-size: 14px;
        }

        .welcome-module {
            width: 100%;
            height: 210px;
        }

        .panel {
            background-color: #fff;
            border: 1px solid transparent;
            border-radius: 3px;
            -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
            box-shadow: 0 1px 1px rgba(0, 0, 0, .05)
        }

        .panel-body {
            padding: 10px
        }

        .panel-title {
            margin-top: 0;
            margin-bottom: 0;
            font-size: 12px;
            color: inherit
        }

        .label {
            display: inline;
            padding: .2em .6em .3em;
            font-size: 75%;
            font-weight: 700;
            line-height: 1;
            color: #fff;
            text-align: center;
            white-space: nowrap;
            vertical-align: baseline;
            border-radius: .25em;
            margin-top: .3em;
        }

        .layui-red {
            color: red
        }

        .main_btn > p {
            height: 40px;
        }

        .layui-bg-number {
            background-color: #F8F8F8;
        }

        .layuimini-notice:hover {
            background: #f6f6f6;
        }

        .layuimini-notice {
            padding: 7px 16px;
            clear: both;
            font-size: 12px !important;
            cursor: pointer;
            position: relative;
            transition: background 0.2s ease-in-out;
        }

        .layuimini-notice-title, .layuimini-notice-label {
            padding-right: 70px !important;
            text-overflow: ellipsis !important;
            overflow: hidden !important;
            white-space: nowrap !important;
        }

        .layuimini-notice-title {
            line-height: 28px;
            font-size: 14px;
        }

        .layuimini-notice-extra {
            position: absolute;
            top: 50%;
            margin-top: -8px;
            right: 16px;
            display: inline-block;
            height: 16px;
            color: #999;
        }

        [v-cloak] {
            display: none;
        }

        .align-center {
            text-align: center;
        }
    </style>
</head>
<body>
<div class="layuimini-container" id="app" v-cloak>
    <div class="layuimini-main">
        <div class="layuimini-main layui-top-box">
            <div class="layui-row layui-col-space10">

                <div class="layui-col-md3">
                    <div class="col-xs-6 col-md-3">
                        <div class="panel layui-bg-cyan">
                            <div class="panel-body">
                                <div class="panel-title">
                                    <h5>文章统计</h5>
                                </div>
                                <div class="panel-content">
                                    <h1 class="no-margins" v-text="articleCount">0</h1>
                                    <div class="stat-percent font-bold text-gray">
                                        <i class="fa fa-commenting"></i>&nbsp;{{increasedArticles}}
                                    </div>
                                    <small>当前分类总记录数</small>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="layui-col-md3">
                    <div class="col-xs-6 col-md-3">
                        <div class="panel layui-bg-blue">
                            <div class="panel-body">
                                <div class="panel-title">
                                    <h5>浏览统计</h5>
                                </div>
                                <div class="panel-content">
                                    <h1 class="no-margins" v-text="viewCount">0</h1>
                                    <div class="stat-percent font-bold text-gray"><i class="fa fa-commenting"></i>&nbsp;{{increasedViews}}
                                    </div>
                                    <small>当前分类总记录数</small>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="layui-col-md3">
                    <div class="col-xs-6 col-md-3">
                        <div class="panel layui-bg-green">
                            <div class="panel-body">
                                <div class="panel-title">
                                    <h5>留言统计</h5>
                                </div>
                                <div class="panel-content">
                                    <h1 class="no-margins" id="tag-count" v-text="messageCount">0</h1>
                                    <div class="stat-percent font-bold text-gray"><i class="fa fa-commenting"></i>&nbsp;{{increasedMessages}}
                                    </div>
                                    <small>当前分类总记录数</small>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md3">
                    <div class="col-xs-6 col-md-3">
                        <div class="panel layui-bg-orange">
                            <div class="panel-body">
                                <div class="panel-title">
                                    <h5>评论统计</h5>
                                </div>
                                <div class="panel-content">
                                    <h1 class="no-margins" v-text="commentCount">0</h1>
                                    <div class="stat-percent font-bold text-gray"><i class="fa fa-commenting"></i>&nbsp;{{increasedComments}}
                                    </div>
                                    <small>当前分类总记录数</small>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md8">
                <div class="layui-row layui-col-space15">
                    <div class="layui-col-md6">
                        <div class="layui-card">
                            <div class="layui-card-header"><i class="fa fa-list-alt icon"></i>数据统计</div>
                            <div class="layui-card-body">
                                <div class="welcome-module">
                                    <div class="layui-row layui-col-space10">
                                        <div class="layui-col-xs6">
                                            <div class="panel layui-bg-number">
                                                <div class="panel-body">
                                                    <div class="panel-title">
                                                        <h5>用户统计</h5>
                                                    </div>
                                                    <div class="panel-content">
                                                        <h1 class="no-margins" v-text="userCount">0</h1>
                                                        <small>当前分类总记录数</small>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="layui-col-xs6">
                                            <div class="panel layui-bg-number">
                                                <div class="panel-body">
                                                    <div class="panel-title">
                                                        <h5>访客统计</h5>
                                                    </div>
                                                    <div class="panel-content">
                                                        <h1 class="no-margins" v-text="visitorCount">0</h1>
                                                        <small>当前分类总记录数</small>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="layui-col-xs6">
                                            <div class="panel layui-bg-number">
                                                <div class="panel-body">
                                                    <div class="panel-title">
                                                        <h5>分类统计</h5>
                                                    </div>
                                                    <div class="panel-content">
                                                        <h1 class="no-margins" v-text="categoryCount">0</h1>
                                                        <small>当前分类总记录数</small>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="layui-col-xs6">
                                            <div class="panel layui-bg-number">
                                                <div class="panel-body">
                                                    <div class="panel-title">
                                                        <h5>标签统计</h5>
                                                    </div>
                                                    <div class="panel-content">
                                                        <h1 class="no-margins" v-text="tagCount">0</h1>
                                                        <small>当前分类总记录数</small>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md6">
                        <div class="layui-card">
                            <div class="layui-card-header"><i class="fa fa-credit-card icon icon-blue"></i>快捷入口</div>
                            <div class="layui-card-body">
                                <div class="welcome-module">
                                    <div class="layui-row layui-col-space10 layuimini-qiuck">
                                        <div class="layui-col-xs3 layuimini-qiuck-module" permission="blog:article:add">
                                            <a href="javascript:;"
                                               layuimini-content-href="/admin/page/article/article-add"
                                               data-title="文章发布" data-icon="fa fa-pencil-square-o">
                                                <i class="fa fa-pencil-square-o"></i>
                                                <cite>文章发布</cite>
                                            </a>
                                        </div>
                                        <div class="layui-col-xs3 layuimini-qiuck-module"
                                             permission="blog:article:query">
                                            <a href="javascript:;"
                                               layuimini-content-href="/admin/page/article/article-list"
                                               data-title="文章管理" data-icon="fa fa-file-text">
                                                <i class="fa fa-file-text"></i>
                                                <cite>文章管理</cite>
                                            </a>
                                        </div>
                                        <div class="layui-col-xs3 layuimini-qiuck-module"
                                             permission="blog:comment:query">
                                            <a href="javascript:;"
                                               layuimini-content-href="/admin/page/comment/comment-list"
                                               data-title="评论管理" data-icon="fa fa-comments">
                                                <i class="fa fa-comments"></i>
                                                <cite>评论管理</cite>
                                            </a>
                                        </div>
                                        <div class="layui-col-xs3 layuimini-qiuck-module"
                                             permission="blog:message:query">
                                            <a href="javascript:;"
                                               layuimini-content-href="/admin/page/message/message-list"
                                               data-title="留言管理" data-icon="fa fa-comment">
                                                <i class="fa fa-comment"></i>
                                                <cite>留言管理</cite>
                                            </a>
                                        </div>
                                        <div class="layui-col-xs3 layuimini-qiuck-module" permission="sys:user:query">
                                            <a href="javascript:;" layuimini-content-href="/admin/page/user/user-list"
                                               data-title="用户管理" data-icon="fa fa-users">
                                                <i class="fa fa-users"></i>
                                                <cite>用户管理</cite>
                                            </a>
                                        </div>
                                        <div class="layui-col-xs3 layuimini-qiuck-module"
                                             permission="sys:visitor:query">
                                            <a href="javascript:;"
                                               layuimini-content-href="/admin/page/visitor/visitor-list"
                                               data-title="访客管理" data-icon="fa fa-user">
                                                <i class="fa fa-user"></i>
                                                <cite>访客管理</cite>
                                            </a>
                                        </div>
                                        <div class="layui-col-xs3 layuimini-qiuck-module"
                                             permission="sys:accesslog:query">
                                            <a href="javascript:;" layuimini-content-href="/admin/page/log/access-list"
                                               data-title="访问日志" data-icon="fa fa-eye">
                                                <i class="fa fa-eye"></i>
                                                <cite>访问日志</cite>
                                            </a>
                                        </div>
                                        <div class="layui-col-xs3 layuimini-qiuck-module"
                                             permission="sys:operationlog:query">
                                            <a href="javascript:;"
                                               layuimini-content-href="/admin/page/log/operation-list"
                                               data-title="操作日志" data-icon="fa fa-gears">
                                                <i class="fa fa-gears"></i>
                                                <cite>操作日志</cite>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                    <div class="layui-col-md12">
                        <div class="layui-box">
                            <div class="layui-row layui-col-space10">
                                <div class="layui-tab layui-tab-brief">
                                    <ul class="layui-tab-title">
                                        <li class="layui-this" permission="sys:accesslog:query">访问日志</li>
                                        <li permission="sys:operationlog:query">操作日志</li>
                                        <li permission="blog:comment:query">最新评论</li>
                                        <li permission="blog:message:query">最新留言</li>
                                    </ul>
                                    <div class="layui-tab-content">
                                        <div class="layui-tab-item layui-show">
                                            <table class="layui-table" permission="sys:accesslog:query">
                                                <colgroup>
                                                    <col width="150">
                                                    <col width="100">
                                                    <col width="100">
                                                    <col width="200">
                                                    <col width="100">
                                                </colgroup>
                                                <thead>
                                                <tr>
                                                    <th style="text-align: center">IP</th>
                                                    <th style="text-align: center">IP来源</th>
                                                    <th style="text-align: center">时间</th>
                                                    <th style="text-align: center">描述</th>
                                                    <th style="text-align: center">访问状态</th>
                                                </tr>
                                                </thead>
                                                <tbody>
                                                <tr v-for="(log, index) in accessLogs" :key="log.id">
                                                    <td class="align-center" v-text="log.requestIp">IP</td>
                                                    <td class="align-center" v-text="log.address">IP来源</td>
                                                    <td class="align-center">{{log.createTime | dateFormat}}</td>
                                                    <td class="align-center" v-text="log.description">描述</td>
                                                    <td class="align-center"><span class="layui-badge"
                                                                                   :class="setLogClass(log.status)"
                                                                                   v-text="log.status==1 ? '成功':'失败'">访问状态</span>
                                                    </td>
                                                </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                        <div class="layui-tab-item">
                                            <div class="layui-tab-item layui-show">
                                                <table class="layui-table" permission="sys:operationlog:query">
                                                    <colgroup>
                                                        <col width="150">
                                                        <col width="100">
                                                        <col width="100">
                                                        <col width="100">
                                                        <col width="200">
                                                        <col width="100">
                                                    </colgroup>
                                                    <thead>
                                                    <tr>
                                                        <th style="text-align: center">IP</th>
                                                        <th style="text-align: center">IP来源</th>
                                                        <th style="text-align: center">时间</th>
                                                        <th style="text-align: center">操作人员</th>
                                                        <th style="text-align: center">描述</th>
                                                        <th style="text-align: center">访问状态</th>
                                                    </tr>
                                                    </thead>
                                                    <tbody>
                                                    <tr v-for="(log, index) in operationLogs" :key="log.id">
                                                        <td class="align-center" v-text="log.requestIp">IP</td>
                                                        <td class="align-center" v-text="log.address">IP来源</td>
                                                        <td class="align-center">{{log.createTime | dateFormat}}</td>
                                                        <td class="align-center" v-text="log.username">操作人员</td>
                                                        <td class="align-center" v-text="log.description">描述</td>
                                                        <td class="align-center"><span class="layui-badge"
                                                                                       :class="setLogClass(log.status)"
                                                                                       v-text="log.status==1 ? '成功':'失败'">访问状态</span>
                                                        </td>
                                                    </tr>
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                        <div class="layui-tab-item">
                                            <div class="layui-tab-item layui-show">
                                                <table class="layui-table" permission="blog:comment:query">
                                                    <colgroup>
                                                        <col width="100">
                                                        <col width="200">
                                                        <col width="100">
                                                        <col width="100">
                                                        <col width="100">
                                                    </colgroup>
                                                    <thead>
                                                    <tr>
                                                        <th style="text-align: center">昵称</th>
                                                        <th style="text-align: center">内容</th>
                                                        <th style="text-align: center">时间</th>
                                                        <th style="text-align: center">文章链接</th>
                                                        <th style="text-align: center">审核状态</th>
                                                    </tr>
                                                    </thead>
                                                    <tbody>
                                                    <tr v-for="(comment, index) in comments" :key="comment.id">
                                                        <td class="align-center" v-text="comment.visitor.nickname">昵称
                                                        </td>
                                                        <td class="align-center" v-text="comment.content">内容</td>
                                                        <td class="align-center">{{comment.createTime | dateFormat}}
                                                        </td>
                                                        <td class="align-center"><a
                                                                :href="'/article/'+comment.articleId"
                                                                v-text="'/article/'+comment.articleId"
                                                                style="color: #01AAED"
                                                                target="_blank">文章链接</a>
                                                        </td>
                                                        <td class="align-center"><span class="layui-badge"
                                                                                       :class="setAuditClass(comment.status)"
                                                                                       v-text="setAuditText(comment.status)">审核状态</span>
                                                        </td>
                                                    </tr>
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                        <div class="layui-tab-item">
                                            <div class="layui-tab-item layui-show">
                                                <table class="layui-table" permission="blog:message:query">
                                                    <colgroup>
                                                        <col width="100">
                                                        <col width="200">
                                                        <col width="100">
                                                        <col width="100">
                                                    </colgroup>
                                                    <thead>
                                                    <tr>
                                                        <th style="text-align: center">昵称</th>
                                                        <th style="text-align: center">内容</th>
                                                        <th style="text-align: center">时间</th>
                                                        <th style="text-align: center">审核状态</th>
                                                    </tr>
                                                    </thead>
                                                    <tbody>
                                                    <tr v-for="(message, index) in messages" :key="message.id">
                                                        <td class="align-center" v-text="message.nickname">昵称
                                                        </td>
                                                        <td class="align-center" v-text="message.content">内容</td>
                                                        <td class="align-center">{{message.createTime | dateFormat}}
                                                        </td>
                                                        <td class="align-center"><span class="layui-badge"
                                                                                       :class="setAuditClass(message.status)"
                                                                                       v-text="setAuditText(message.status)">审核状态</span>
                                                        </td>
                                                    </tr>
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md12">
                        <div class="layui-card">
                            <div class="layui-card-header"><i class="fa fa-line-chart icon"></i>报表统计</div>
                            <div class="layui-card-body">
                                <div id="echarts-records" style="width: 100%;min-height:500px"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="layui-col-md4">
                <div class="layui-card" permission="sys:notice:query">
                    <div class="layui-card-header"><i class="fa fa-bullhorn icon icon-tip"></i>系统公告</div>
                    <div class="layui-card-body layui-text">
                        <div class="layuimini-notice" v-for="(notice, index) in notices" :key="notice.id">
                            <div class="layuimini-notice-title">{{notice.title}}</div>
                            <div class="layuimini-notice-extra">{{notice.createTime}}</div>
                            <div class="layuimini-notice-content layui-hide">
                                {{notice.content}}
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-card" permission="blog:article:query">
                    <div class="layui-card-header"><i class="fa fa-book icon icon-cray"></i>最新文章</div>
                    <div class="layui-card-body">
                        <ul class="layui-timeline">
                            <li class="layui-timeline-item" v-for="(article, index) in articles" :key="article.id">
                                <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
                                <div class="layui-timeline-content layui-text">
                                    <h3 class="layui-timeline-title">{{toLocaleDate(article.createTime)}}</h3>
                                    <p>
                                        <a :href="'/article/'+article.id" target="_blank">{{article.title}}</a></br>
                                        {{article.summary}}
                                    </p>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="/static/admin/layuimini/lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
<script src="/static/admin/layuimini/js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script src="/static/admin/layuimini/lib/jquery-3.4.1/jquery-3.4.1.min.js"></script>
<script src="/static/admin/my/js/my.js" charset="utf-8"></script>
<script type="text/javascript" src="/static/front/js/vue.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.js"></script>
<script src="/static/front/js/moment.js"></script>
<!--时间汉化-->
<script type="text/javascript">
    moment.locale('zh-cn', {
        months: '一月_二月_三月_四月_五月_六月_七月_八月_九月_十月_十一月_十二月'.split('_'),
        monthsShort: '1月_2月_3月_4月_5月_6月_7月_8月_9月_10月_11月_12月'.split('_'),
        weekdays: '星期日_星期一_星期二_星期三_星期四_星期五_星期六'.split('_'),
        weekdaysShort: '周日_周一_周二_周三_周四_周五_周六'.split('_'),
        weekdaysMin: '日_一_二_三_四_五_六'.split('_'),
        longDateFormat: {
            LT: 'HH:mm',
            LTS: 'HH:mm:ss',
            L: 'YYYY-MM-DD',
            LL: 'YYYY年MM月DD日',
            LLL: 'YYYY年MM月DD日Ah点mm分',
            LLLL: 'YYYY年MM月DD日ddddAh点mm分',
            l: 'YYYY-M-D',
            ll: 'YYYY年M月D日',
            lll: 'YYYY年M月D日 HH:mm',
            llll: 'YYYY年M月D日dddd HH:mm'
        },
        meridiemParse: /凌晨|早上|上午|中午|下午|晚上/,
        meridiemHour: function (hour, meridiem) {
            if (hour === 12) {
                hour = 0;
            }
            if (meridiem === '凌晨' || meridiem === '早上' ||
                meridiem === '上午') {
                return hour;
            } else if (meridiem === '下午' || meridiem === '晚上') {
                return hour + 12;
            } else {
                // '中午'
                return hour >= 11 ? hour : hour + 12;
            }
        },
        meridiem: function (hour, minute, isLower) {
            const hm = hour * 100 + minute;
            if (hm < 600) {
                return '凌晨';
            } else if (hm < 900) {
                return '早上';
            } else if (hm < 1130) {
                return '上午';
            } else if (hm < 1230) {
                return '中午';
            } else if (hm < 1800) {
                return '下午';
            } else {
                return '晚上';
            }
        },
        calendar: {
            sameDay: '[今天]LT',
            nextDay: '[明天]LT',
            nextWeek: '[下]ddddLT',
            lastDay: '[昨天]LT',
            lastWeek: '[上]ddddLT',
            sameElse: 'L'
        },
        dayOfMonthOrdinalParse: /\d{1,2}(日|月|周)/,
        ordinal: function (number, period) {
            switch (period) {
                case 'd':
                case 'D':
                case 'DDD':
                    return number + '日';
                case 'M':
                    return number + '月';
                case 'w':
                case 'W':
                    return number + '周';
                default:
                    return number;
            }
        },
        relativeTime: {
            future: '%s内',
            past: '%s前',
            s: '几秒',
            ss: '%d秒',
            m: '1分钟',
            mm: '%d分钟',
            h: '1小时',
            hh: '%d小时',
            d: '1天',
            dd: '%d天',
            M: '1个月',
            MM: '%d个月',
            y: '1年',
            yy: '%d年'
        },
        week: {
            // GB/T 7408-1994《数据元和交换格式·信息交换·日期和时间表示法》与ISO 8601:1988等效
            dow: 1, // Monday is the first day of the week.
            doy: 4  // The week that contains Jan 4th is the first week of the year.
        }
    });
</script>
<script>
    layui.use(['layer', 'miniTab', 'echarts'], function () {
        var $ = layui.jquery,
            layer = layui.layer,
            miniTab = layui.miniTab,
            echarts = layui.echarts;
        const vm = new Vue({
            el: '#app',
            data: {
                articleCount: 0,
                categoryCount: 0,
                tagCount: 0,
                commentCount: 0,
                viewCount: 0,
                messageCount: 0,
                visitorCount: 0,
                userCount: 0,
                accessLogs: [],
                operationLogs: [],
                comments: [],
                messages: [],
                articles: [],
                frontViews: [],
                backViews: [],
                increasedViews: 0,
                increasedArticles: 0,
                increasedMessages: 0,
                increasedComments: 0,
                notices: [],
            },
            methods: {
                getData: function () {
                    axios({
                        url: '/admin/indexData',
                        method: 'GET',
                    }).then((result) => {
                        let data = result.data;
                        this.articleCount = data.articleCount;
                        this.categoryCount = data.categoryCount;
                        this.tagCount = data.tagCount;
                        this.commentCount = data.commentCount;
                        this.viewCount = data.viewCount;
                        this.messageCount = data.messageCount;
                        this.visitorCount = data.visitorCount;
                        this.userCount = data.userCount;
                        this.accessLogs = data.accessLogs;
                        this.operationLogs = data.operationLogs;
                        this.comments = data.comments;
                        this.messages = data.messages;
                        this.articles = data.articles;
                        this.frontViews = data.frontViews;
                        this.backViews = data.backViews;
                        this.increasedViews = data.increasedViews;
                        this.increasedArticles = data.increasedArticles;
                        this.increasedMessages = data.increasedMessages;
                        this.increasedComments = data.increasedComments;
                        this.notices = data.notices;
                        this.$nextTick(function () {
                            this.initChart();
                        })
                    });
                },
                setLogClass(value) {
                    return value === 1 ? 'layui-bg-green' : 'layui-bg-red';
                },
                setAuditClass(value) {
                    if (value === 0) {
                        return 'layui-bg-red';
                    } else if (value === 1) {
                        return 'layui-bg-blue';
                    } else if (value === 2) {
                        return 'layui-bg-green';
                    }
                },
                setAuditText(value) {
                    if (value === 0) {
                        return '审核未过';
                    } else if (value === 1) {
                        return '等待审核';
                    } else if (value === 2) {
                        return '审核通过';
                    }
                },
                toLocaleDate(value) {
                    return moment(value).format('YYYY年M月D日');
                },
                getLast7Dates() {
                    let start = moment().startOf('day').subtract(7, 'days');
                    let dates = [];
                    for (let i = 0; i <= 7; i++) {
                        let date = start.format('YYYY-MM-DD');
                        dates.push(date);
                        start = start.add(1, 'days');
                    }
                    return dates;
                },
                filterViewData(viewData) {
                    let dateResult = this.getLast7Dates();
                    let dates = viewData.map(item => item.date);
                    let dataResult = [];
                    $.each(dateResult, function (i, item) {
                        let index = dates.indexOf(item);
                        let count = 0;
                        if (index !== -1) {
                            count = viewData[index].viewCount;
                        }
                        dataResult.push(count);
                    })
                    return {
                        date: dateResult,
                        data: dataResult,
                    }
                },
                initChart() {
                    let frontViewsData = this.filterViewData(this.frontViews);
                    let backViewsData = this.filterViewData(this.backViews);
                    var echartsRecords = echarts.init(document.getElementById('echarts-records'), 'walden');
                    var optionRecords = {
                        tooltip: {
                            trigger: 'axis'
                        },
                        legend: {
                            data: ['最近7天前台流量', '最近7天后台流量']
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        toolbox: {
                            feature: {
                                saveAsImage: {}
                            }
                        },
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data: frontViewsData.date,
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [
                            {
                                name: '最近7天前台流量',
                                type: 'line',
                                data: frontViewsData.data,
                            },
                            {
                                name: '最近7天后台流量',
                                type: 'line',
                                data: backViewsData.data,
                            },
                        ]
                    };
                    echartsRecords.setOption(optionRecords);

                    // echarts 窗口缩放自适应
                    window.onresize = function () {
                        echartsRecords.resize();
                    }
                }
            },
            created() {
                this.getData();
            },
            filters: {
                dateFormat: function (value) {
                    return moment(value).fromNow();
                }
            },
        });

        miniTab.listen();
        /**
         * 查看公告信息
         **/
        $('body').on('click', '.layuimini-notice', function () {
            var title = $(this).children('.layuimini-notice-title').text(),
                noticeTime = $(this).children('.layuimini-notice-extra').text(),
                content = $(this).children('.layuimini-notice-content').html();
            var html = '<div style="padding:15px 20px; text-align:justify; line-height: 22px;border-bottom:1px solid #e2e2e2;background-color: #2f4056;color: #ffffff">\n' +
                '<div style="text-align: center;margin-bottom: 20px;font-weight: bold;border-bottom:1px solid #718fb5;padding-bottom: 5px"><h4 class="text-danger">' + title + '</h4></div>\n' +
                '<div style="font-size: 12px">' + content + '</div>\n' +
                '</div>\n';
            parent.layer.open({
                type: 1,
                title: '系统公告' + '<span style="float: right;right: 1px;font-size: 12px;color: #b1b3b9;margin-top: 1px">' + noticeTime + '</span>',
                area: '300px;',
                shade: 0.8,
                id: 'layuimini-notice',
                btn: ['取消'],
                btnAlign: 'c',
                moveType: 1,
                content: html,
            });
        });

        checkPermission();
    });
</script>
</body>
</html>
